<template>
    <!-- <n-tree
        :data="data"
        :render-suffix="renderTreeSuffix"
        block-line
        cascade
        checkable
        key-field="id"
        label-field="name"
        :node-props="
            (node) => {
                return {
                    onClick() {
                        emit('click', node)
                    },
                }
            }
        "
        :theme-overrides="{
            fontSize: '10px',
        }"
        expand-on-click /> -->
    <div class="catalog-tree">
        <div class="catalog-tree-header">瓦片批次</div>
        <el-row style="margin-bottom: 10px; padding: 8px">
            <el-input
                v-model="filterText"
                placeholder="输入关键字过滤类别"></el-input>
        </el-row>
        <el-scrollbar max-height="100%">
            <!-- <el-space direction="vertical"> -->

            <el-row style="width: 100%;">
                <el-tree
                style="width: 100%;"
                    :data="data"
                    node-key="id"
                    ref="treeRef"
                    :accordion="false"
                    filterable
                    :filter-node-method="filterNode"
                    @node-click.self="handleNodeClick"
                    :props="{
                        label: 'name',
                    }">
                    <template #default="{ node, data }">
                        <span class="custom-tree-node">
                            <span>
                                <!-- <el-icon>
                                <ActionIcon.Grid />
                            </el-icon> -->
                                <!-- <n-avatar
                                :size="20"
                                :src="getStaticUrl(data.icon)"
                                color="#ddd"
                                :img-props="{
                                    style: {
                                        objectFit: 'contain',
                                    },
                                }"
                                fallback-src="/icon/Group.png"
                                preview-disabled></n-avatar> -->
                                <!--<TreeIcon :url="data.icon" />-->
                                {{ node.label }}
                            </span>
                            <div class="btn-container">
                                <mini-icon-button
                                    v-if="showAdd"
                                    size="small"
                                    @click="emit('add', node)"
                                    type="primary"
                                    :secondary="false"
                                    quaternary
                                    tooltip="添加">
                                    <ActionIcon.Plus />
                                </mini-icon-button>
                                <mini-icon-button
                                    v-if="showDelete && data.name !== 'root'"
                                    size="small"
                                    @click="emit('delete', node)"
                                    type="error"
                                    :secondary="false"
                                    quaternary
                                    tooltip="删除">
                                    <ActionIcon.Delete />
                                </mini-icon-button>
                                <mini-icon-button
                                    v-if="showEdit && data.name !== 'root'"
                                    size="small"
                                    @click="emit('edit', node)"
                                    type="success"
                                    :secondary="false"
                                    quaternary
                                    tooltip="编辑">
                                    <ActionIcon.Edit />
                                </mini-icon-button>
                                <!--<mini-icon-button-->
                                <!--    v-if="showObjectAdd"-->
                                <!--    size="small"-->
                                <!--    @click="emit('objectAdd', node)"-->
                                <!--    type="tertiary"-->
                                <!--    :secondary="false"-->
                                <!--    quaternary-->
                                <!--    tooltip="添加目标">-->
                                <!--    <ActionIcon.UserPlus />-->
                                <!--</mini-icon-button>-->
                            </div>
                        </span>
                    </template>
                </el-tree>
            </el-row>

            <!-- </el-space> -->
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import { useCatalogTree, useResourceHelper } from '@/hooks'
import MiniIconButton from '@/components/common/MiniIconButton.vue'
import { NSpace } from 'naive-ui'
import type {
    TreeNodeProps,
    TreeRenderProps,
} from 'naive-ui/es/tree/src/interface'

import { ISchema, Schema } from '@formily/vue'
import { TreeOption } from 'naive-ui/lib'
import { ICatalog } from '@/types/keyobject'
import { ActionIcon } from '@/common/ActionIconList'
import { ref, watch } from 'vue'
import type { ElTree, TreeNode } from 'element-plus'
import TreeIcon from './TreeIcon.vue'

// const { tree_data } = useCatalogTree()

const emit = defineEmits<{
    click: [data: ICatalog, node: Node]
    add: [data: ICatalog]
    edit: [data: ICatalog]
    delete: [data: ICatalog]
    setting: [data: ICatalog]
    objectAdd: [data: ICatalog]
}>()

interface Props {
    showObjectAdd?: boolean
    showAdd?: boolean
    showDelete?: boolean
    showEdit?: boolean
    showSetting?: boolean
    data: ICatalog[]
    // loading: boolean
}

const props = withDefaults(defineProps<Props>(), {
    showObjectAdd: false,
    showAdd: false,
    showDelete: false,
    showEdit: false,
    showSetting: false,
    data: () => [],
    // loading: false,
})

const treeRef = ref<InstanceType<typeof ElTree>>()

function handleNodeClick(data: ICatalog, node: Node) {
    console.log('handleNodeClick ======>', data, node)

    // console.log('treeRef======>', treeRef)

    // const checkedKeys = treeRef.value?.getCheckedKeys()

    // console.log('checkedKeys======>', checkedKeys)

    emit('click', data, node)

    // (node) => emit('click', node)
}

const { getStaticUrl } = useResourceHelper()

const filterNode = (value: string, data: ICatalog) => {
    if (!value) return true
    return data.name.includes(value)
}

const filterText = ref('')

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})
</script>

<style lang="scss" scoped>
@use '/src/assets/scss/main.scss' as *;
.catalog-tree {
    height: 100%;
    width: 100%;
    display: flex;
    flex-shrink: 1;
    flex-grow: 1;
    overflow-y: auto;
    flex-direction: column;

    &-header {
        height: 30px;
        // width: 100%;
        // background: $c-gray-7;
        background: lighten(#000, 12);
        display: flex;
        align-items: center;
        padding: 5px 10px;
    }
}
.custom-tree-node {
    flex: 1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    gap: 5px;

    .btn-container {
        display: flex;
        gap: 4px;
    }
}
</style>
